<template>
  <div class="wh hide" id="wrap">
    <div class="page1 page" style="position: relative">
      <div class="container" id="scroller" v-show="loading">
        <div class="content">
          <img style="z-index: -1;position: absolute;left: 0;right: 0;top:0;bottom: 0;width: 100vw"
               :src="`/img/background.jpg`"  :onerror="defaultImg"
          >

          <div style="z-index: 2;height: 6px;line-height: 6px;padding-left: 20px;font-size:14pt">
<!--            <div style="color:rgb(255,255,208);font-family: '黑体';letter-spacing: 1px">{{logo}}</div>-->
          </div>
          <div style="display: flex;justify-content: space-between;flex-wrap: nowrap;">
            <div style="flex:1;padding: 0 20px">
              <div class="p-number p-wg" >围观人数: {{ wg }}</div>
            </div>
            <div style="flex:1;padding: 0 20px">
              <div class="p-number p-cy" >参与人数: {{ cy }}</div>
            </div>
          </div>

          <div style="" class="title">
<!--            <img :src="`/img/title.png`"-->
<!--                 :onerror="defaultTitle"-->
<!--                 class="img-title">-->
          </div>

          <img :src="rule" class="btn btn-rule clipboard" style="z-index: 999" @click="go('rule')">
          <img :src="lipin" class="btn btn-prize clipboard" style="z-index: 999" @click="go('prize')">
          <!-- 大转盘 -->
<!--          <div class="rotateWrap" style="height: 330px;width: 100%;text-align: center;position: relative" >-->
<!--            <img id="lottery" v-if="test"  style="width: 90vw" :src="pan" class="rotateBg wh">-->
<!--            <img style="position: absolute;top:-10px;left:20px;right:0;display:block;width: 90vw;z-index: 999" :src="zhen" class="zhizhen wh">-->
<!--            <div class="zhiBtn" style="width: 60px;height: 60px;position: absolute;left: 0;right: 0;top:50%;margin: 0 auto;transform: translateY(-50%)"  @click="clickBtn"></div>-->
<!--          </div>-->

          <!-- 砸金蛋 -->
          <div class="treasureBox" >
            <img @click="clickDan('egg1')" id="egg1" :src="egg1" class="egg egg1">
            <img @click="clickDan('egg2')" id="egg2"  :src="egg1" class="egg egg2">
            <img @click="clickDan('egg3')" id="egg3"  :src="egg1" class="egg egg3">
            <img :src="chui" id="hammer" class="hammer hammer-hide">
          </div>

          <div style="width: 100vw;text-align: center">
            <div style="background:rgb(192,0,27);width:180px;padding: 5px 10px;border-radius: 20px;margin: 0 auto;margin-top: 40px;font-weight: bold;color:white">您有{{info.count}}次抽奖机会</div>
          </div>

          <div style="margin-top:0px">
            <div style="padding: 20px;">
              <img style="width: 100%"
                   :src="`/img/exhibition.png?t=${Math.random()}`"
                   :onerror="defaultExhi"
                   alt="">
            </div>
          </div>

          <div style="padding: 0 20px" >
            <div style="display: flex;justify-content: center">
              <div :style="`background:url('${bg}')`" class="zx" style="margin-right: 5px;position: relative" >
                <div style="color:white;font-size: 14pt;margin-top: 15px;font-weight: bold;opacity: .8;text-indent: 5px">咨询热线</div>
                <div style="color:white;color:white;opacity: .6;margin-top: 12px">0533-729 8888
                  <a href="tel:05336257777" style="position:absolute;left:0;right:0;top:0;bottom:0;display: block"></a>
                </div>
              </div>
              <div :style="`background:url('${bg}')`" class="zx" style="margin-left: 5px">
                <div style="color:white;font-size: 14pt;margin-top: 15px;font-weight: bold;opacity: .8;text-indent: 5px">领奖地址</div>
                <div @click="click_map" style="color:white;color:white;opacity: .6;margin-top: 4px;font-size:8pt">淄博市世纪路与昌国路交汇处
                  （嘉亿中心营销中心）</div>
              </div>
            </div>
          </div>
          <div style="margin-top: 10px;text-align: center">
            <img :src="btn6" style="width: 180px;" alt="" @click="goAppointment">
          </div>
          <div style="margin-top: 10px;" >
<!--            <wx-open-launch-weapp id="launch-btn"-->
<!--                                  username="gh_b71a57181656"-->
<!--                                  path="pages/buildDetail/buildDetail?buildId=1301514&cityRemark=zibo"-->
<!--                                  style="width: 100%;"-->
<!--                                  @error="handleErrorFn"-->
<!--                                  @launch="handleLaunchFn">-->
<!--              <template>-->
<!--                <img :src="rewrite" style="width: 70%;margin-left: 16%;border-radius: 20px">-->
<!--              </template>-->
<!--            </wx-open-launch-weapp>-->

<!--            <wx-open-launch-weapp-->
<!--                style="width: 100vw;" id="launch-btn"-->
<!--                username="gh_b71a57181656"-->
<!--                path="pages/buildDetail/buildDetail?buildId=1301514&cityRemark=zibo"-->
<!--            >-->
<!--              <script type="text/wxtag-template">-->
<!--                <style>-->
<!--                  .jump-btn {-->
<!--                    width: 70vw;-->
<!--                    margin-left: 16%;-->
<!--                    border-radius: 20px;-->
<!--                    height: 50px;-->
<!--                  }-->
<!--                </style>-->
<!--                <img src="http://wx.lejuhaofang.net/rewrite.jpeg" class="jump-btn">-->
<!--              </script>-->
<!--            </wx-open-launch-weapp>-->
          </div>

          <div style="padding: 10px 20px;" >
            <div style="border-radius: 20px">
              <img style="width: 100%" :src="`/img/project.png?t=${Math.random()}`"  onerror="javascript:this.style='display:none'" alt="">
            </div>
            <div style="padding: 10px;border: 2px solid rgb(200,127,118);border-radius: 20px">
              <swiper :options="swiperOption" ref="swiper" style="height: 100%">
                <swiper-slide  style="position: static">
                  <img :src="slide1" class="swiper-img" alt="">
                </swiper-slide>
                <swiper-slide  style="position: static">
                  <img :src="slide2" class="swiper-img" alt="">
                </swiper-slide>
                <swiper-slide  style="position: static">
                  <img :src="slide3" class="swiper-img" alt="">
                </swiper-slide>
                <swiper-slide  style="position: static">
                  <img :src="slide4" class="swiper-img" alt="">
                </swiper-slide>
<!--                <div class="swiper-pagination" slot="pagination"></div>-->
<!--                <div slot="button-prev" class="swiper-custom-prev" >-->
<!--                  <div class="fit custom-page"><i aria-hidden="true" class="material-icons q-icon">chevron_left</i></div>-->
<!--                </div>-->
<!--                <div slot="button-next" class="swiper-custom-next" >-->
<!--                  <div class="fit custom-page"><i aria-hidden="true" class="material-icons q-icon">chevron_right</i></div>-->
<!--                </div>-->
              </swiper>

            </div>
          </div>

          <div>


          </div>
<!--          <div style="padding: 20px;margin-top:10px;position: relative">-->
<!--            <div style="border:1px solid rgb(255,255,208);border-radius: 20px;height: 300px">-->
<!--                <div style="height: 220px;width: 100%;text-align: center">-->
<!--                  <img src="../assets/20210118235420.jpg" style="width: 150px;padding-top: 30px" alt="">-->
<!--                </div>-->
<!--                <div style="width: 220px;margin:0 auto;text-align: center;color:white">长按识别，添加置业顾问好友预约看房，在线咨询项目优惠</div>-->
<!--                <div style="width: 220px;margin:0 auto;text-align: center;color:white">24小时为您服务</div>-->
<!--            </div>-->
<!--            <img :src="title" style="position: absolute;top:7px;width: 220px;left: 0;right: 0;margin:0 auto" alt="">-->
<!--          </div>-->

        </div>
      </div>
      <div class="page_arrow_bottom"></div>
    </div>
    <preload-image :imgUrlArr="imgUrls" @imgAllLoaded="imgAllLoaded" :animationShow="animationShow" :tipStr="`页面加载中...`"></preload-image>
  </div>
</template>

<script>
import { getInfo, getRatio, savePrize, saveAppointment } from '@/api/api'
import rule from '@/assets/1-2.png'
import lipin from '@/assets/1-3.png'
import title from '@/assets/zxzx.png'
import bg from '@/assets/bg.png'
import pan from  '@/assets/1-4.png'
import zhen from '@/assets/1-5.png'
import slide1 from '@/assets/MG150.jpg'
import slide2 from '@/assets/MG151.jpg'
import slide3 from '@/assets/MG152.jpg'
import slide4 from '@/assets/MG153.jpg'
import jindanbg from '@/assets/jindanbg.jpg'
import egg1 from '@/assets/egg1.png'
import egg2 from '@/assets/egg2.png'
import chui from '@/assets/chui.png'
import rewrite from '@/assets/rewrite.jpeg'
import btn6 from '@/assets/btn6.png'


export default {
name: "index",
  data() {
    return{
      bgurl: process.env.VUE_APP_API_BASE,
      logo: '',
      rule:rule,
      lipin: lipin,
      lottery: { ch: 0 },
      test:true,
      lock: false,
      title: title,
      bg: bg,
      info: {},
      wg: 0,
      cy: 0,
      defaultImg: 'this.src="' + require('@/assets/MG149.jpeg') + '"',
      defaultTitle: 'this.src="' + require('@/assets/IMG_0986.png') + '"',
      defaultExhi: 'this.src="' + require('@/assets/MG149-2.png') + '"',
      pan: pan,
      zhen: zhen,
      slide1:slide1,
      slide2:slide2,
      slide3:slide3,
      slide4:slide4,
      prizeList: [],
      jindanbg: jindanbg,
      dan: egg1,
      ldan: egg2,
      egg1: egg1,
      chui: chui,
      rewrite: rewrite,
      wxHtml: '',
      animationShow: false,
      imgUrls: ['/img/background.jpg', this.defaultImg, '/img/title.png', this.defaultTitle],
      loading: false,
      timer: null,
      btn6: btn6,
      url: "http://wx.lejuhaofang.net/"
    }
  },
  // components: {
  //   preloadImage
  // },
  computed:{
    swiperOption: {
      get: function () {
        return this.extendObj({
          slidesPerView: 'auto',
          pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true,
            clickable: true
          },
          autoplay: 2000,
          loop: true,
          // loopedSlides: 1,
          navigation: {
            nextEl: '.swiper-custom-next',
            prevEl: '.swiper-custom-prev1'
          }
        }, {})
      },
      set: function () {

      }
    }
  },
  mounted() {
    // getbackground().then(result => {
    //   this.logo = result.data.logo
    // })
    let openid =  window.localStorage.getItem("openid")
    this.timer = setInterval(()=>{
      if(openid) {
        getInfo(openid).then(success => {
          // if(success)
          this.info = success.data.info;
          this.wg = success.data.wg || 0;
          this.cy = success.data.cy || 0;
        })
        clearInterval(this.timer)
        this.timer = null
      }
    }, 500)
    setTimeout(()=>{
      this.getUrl()
    },2000)

  },
  methods:{
    goAppointment(){
      this.$router.push("/appointment")
    },
      imgAllLoaded(){
        this.loading = true
      },
      getUrl() {
        let script = document.createElement('script')
        script.type = 'text/wxtag-template'
        script.text = `<img src="http://wx.lejuhaofang.net/rewrite.jpeg" style="width: 70vw;margin-left: 16%;border-radius: 20px">`
        this.wxHtml = `<wx-open-launch-weapp
                              style="width: 100vw;" id="launch-btn"
                              username="gh_b71a57181656"
                              path="pages/buildDetail/buildDetail?buildId=1301514&cityRemark=zibo"
                            >${script.outerHTML}
                          </wx-open-launch-weapp>`
        this.$nextTick(() => {
          let launchButton = document.getElementById('launch-btn')
          launchButton.addEventListener('launch', function(e) {
            console.log('success', e.detail)
          })

          launchButton.addEventListener('error', function(e) {
            console.log('fail', e.detail)
          })
        })
      },
      handleErrorFn(e){
        console.log('fail', e.detail);
      },

      handleLaunchFn(e){
        console.log('success');
      },
     click_map() {
      wx.openLocation({
        // 117.80614 37.18118
        latitude: parseFloat(36.789667),
        longitude: parseFloat( 118.032165),
        name: '嘉亿中心营销中心',
        address: '淄博市世纪路与昌国路交汇处(嘉亿中心营销中心)',
        scale: 15
      })
    },
    cloneObj (oldObj) { // 复制对象方法
      if (typeof (oldObj) !== 'object') return oldObj;
      if (oldObj == null) return oldObj;
      var newObj = Object();
      for (var i in oldObj) { newObj[i] = this.cloneObj(oldObj[i]); }
      return newObj;
    },
    extendObj () { // 扩展对象
      var args = arguments;// 将传递过来的参数数组赋值给args变量
      if (args.length < 2) return;
      var temp = this.cloneObj(args[0]); // 调用复制对象方法
      for (var n = 1; n < args.length; n++) {
        for (var i in args[n]) {
          temp[i] = args[n][i];
        }
      }
      return temp;
    },
    uuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {

        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";

      var uuid = s.join("");
      return uuid;
    },
    go(item){
      if(item === 'prize'){
        this.$router.push('/prize')
      }else {
        this.$router.push('/rule')
      }
    },
    clickDan(name){
      if(this.info.count <= 0){
        this.$alert("抽奖机会已用完！想获取更多机会，请咨询7298888", "嘉亿中心")
        return;
      }
      if(this.lock){
        return
      }
      this.lock = true
      // getRatio().then(result => {
      //   this.ratiio = result.data.ratio
      //
      //   var model = [];
      //   var zong = 0;
      //   this.ratiio.map((item) => {
      //     if ((item.synum * 1) > 0) {
      //       zong += item.rate;
      //       model.push({
      //         name: item.name,
      //         key: item.id,
      //         radio: item.rate,
      //         level: item.level,
      //         levelname: item.levelname
      //       })
      //     }
      //   });
      //   this.Draw(model)
      //   this.result = this.getResult()

        let dan = document.getElementById(name);
        let clientX = dan.offsetLeft
        let clientY = dan.offsetTop
        let offsetWidth = dan.offsetWidth
        let hammer = document.getElementById("hammer")
        hammer.style = "display:block;top:" + clientY + "px;" + "left:" + (clientX + (offsetWidth / 2)) + "px"

        hammer.className += " dong1"
        dan.src = this.ldan
          let uuid = window.localStorage.getItem("openid")
          // let uuid = 'oQsnG5-0IGILNvqxD_0C2_y-etP8'
          savePrize(uuid, this.result).then(response => {
            if(response.data.message){
              this.$alert(response.data.message,"嘉亿中心", {
                confirmButtonText: '确定',
                callback: action => {
                  window.location.href = this.url
                }
              })
            }
            this.prize = response.data.prize;
            this.$router.push("/cprize?attr2=" + this.prize.attr2)
          }).catch(()=>{
            this.$router.push("/")
          })
      // })
    },
    clickBtn() {
      if(this.info.count <= 0){
        this.$alert("抽奖机会已用完！想获取更多机会，请咨询7298888", "嘉亿中心")
        return;
      }

      if(this.lock){
        return
      }

      getRatio().then(result => {
        this.ratiio = result.data.ratio

        var model = [];
        var zong = 0;
        this.ratiio.map((item) => {
          if((item.synum * 1) > 0) {
            zong += item.rate;
            model.push({
              name: item.name,
              key: item.id,
              radio: item.rate,
              level: item.level,
              levelname: item.levelname
            })
          }
        }, 0);

        //
        // if(zong < 100){
        //   model.push({
        //     name: "未中奖",
        //     key: 0,
        //     radio: 100 - zong,
        //   })
        // }

        this.Draw(model)
        this.result = this.getResult()

        this.lottery.ch =  { ch: 0 }
        // var n1 = Math.floor(Math.random()*8+1);
        // var n2 = Math.floor(Math.random()*4+4);
        // this.lottery.ch = 45*n1 + 360*n2 + 22.5;

        this.lottery.ch = 360 * 2;
        this.lock = true

        let level = 360 / 5;
        let yi = level * 0;
        let te = level * 1;
        let xing = level * 2;
        let san = level * 3;
        let er = level * 4

        let tempLottery = 0;
        let du = 5

        switch (this.result.level) {
          case 0:
            tempLottery = this.random(te+du,xing-du)
            break;
          case 1:
            tempLottery = this.random(yi+du,te-du)
            break;
          case 2:
            tempLottery = this.random(er+du,360-du)
            break;
          case 3:
            tempLottery = this.random(san+du,er-du)
            break;
          case 4:
            tempLottery = this.random(xing+du,san-du)
            break;
        }

        this.lottery.ch += tempLottery
        // document.getElementById('lottery').style= `width: 90vw;transition: all 8s ease;
        //      transform: rotate(`+this.lottery.ch+`deg);
        //     -webkit-transform: rotate(`+this.lottery.ch+`deg)`

        let uuid = window.localStorage.getItem("openid")

        savePrize(uuid, this.result).then(response => {
          if(response.data.message){
            this.$alert(response.data.message, "嘉亿中心")
            // this.$router.push("/")
          }
          this.prize = response.data.prize;

          setTimeout(()=>{
            this.$router.push("/cprize?attr2=" + this.prize.attr2)
          }, 8000)
        })


      })


      // setTimeout(()=>{
      //   this.$router.push("/cprize");
      // }, 8000)
    },
    random(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
    },
    Draw(prizes) {
      var prizeList = [] //按照权重分解后的奖品数组
      prizes.map(function (item) {
        // prizeList.push({
        //   name: item.name,
        //   value: item.key
        // })
        for (var i = 0; i < item.radio; i++) {
          prizeList.push({
            name: item.name,
            value: item.key,
            level: item.level,
            levelname: item.levelname
          })
        }
      });
      this.prizeList = this.reset(prizeList);
    },
    // 范围随机数
    randomFrom(lowerValue, upperValue) {
      return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
    },

    // 随机打乱数组
    reset(arr) {
      var that = this
      var eachArr = arr.concat([])
      var lastArr = []
      let len = eachArr.length;
      for(var i=0;i< len; i++){
        var randomIndex = that.randomFrom(0, eachArr.length - 1)
        lastArr.push(eachArr[randomIndex])
        eachArr.splice(randomIndex, 1)
      }
      return lastArr
    },


    getResult() {
      var random = this.randomFrom(0, this.prizeList.length - 1);
      return this.prizeList[random]
    }
  }
}
</script>

<style scoped>
.title{
  text-align: center;height: 274px;padding-top: 30px
}
@media screen and (max-width: 359px) {
  .title {
    height:160px;
  }
}
.p-number {
  font-size: 12px;
  /*width: 30%;*/
  padding: 6px 10px;
  text-align: center;
  text-shadow: #697fa045 0px 1px 1px;
  /*padding: 2px 1px;*/
  background: #e1b5b4;
  border-radius: 16px;
  color:rgb(176,19,11);white-space:nowrap
}
.img-title {
  width: 80%;
  animation: zoomIn 1s ease both, biger3 2s linear infinite 1s forwards;
  -webkit-animation: zoomIn 1s ease both, biger3 2s linear infinite 1s forwards;
}
.btn-rule{
  position: absolute;
  right: 0;
  top: 280px;
  width: 90px;
}
.btn-prize{
  position: absolute;
  right: 0;
  top: 330px;
  width: 90px;
}

rotateWrap {
  position: absolute;
  width: 4.7rem;
  left: 50%;
  top: 10%;
  height: 4.7rem;
  margin-left: -2.3rem;
  -webkit-animation: rotateIn 1.0s ease 0.2s both;
}
.zhiBtn{
  z-index: 999;
}
.zx{
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  flex:1;
  height: 100px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.swiper-img{
  width: 100%;
}

.treasureBox {
  /*position: absolute;*/
  /*width: 100%;*/
  /*height: 8%;*/
  /*top: 16.1%;*/
  /*left: 0;*/
  /*margin: 0;*/
  height: 200px;
  position: relative;
}

img {
  width: 100%;
  vertical-align: top;
}
.hammer-hide{
  display: none;
}
.treasureBox .egg {
  position: absolute;
  width: 19%;
}

.treasureBox .egg1 {
  left: 17%;
  top: 80px;
}

.treasureBox .egg2 {
  left: 40%;
  top: 50px
}
.treasureBox .egg3 {
  right: 17%;
  top: 80px;
}

.treasureBox .hammer {
  position: absolute;
  width: 13%;
  left: 10%;
}

.dong1{
  -webkit-animation:  tada1 .3s  both;
}

@-webkit-keyframes tada1 {
  0% {
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
    -webkit-transform-origin:90% 90%
  }

  70%{
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 40deg);
    -webkit-transform-origin:90% 90%
  }

  100%{
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -15deg);
    -webkit-transform-origin:90% 90%
  }

}
@keyframes tada1 {

  0% {
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
    -webkit-transform-origin:90% 90%
  }

  70%{
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 40deg);
    -webkit-transform-origin:90% 90%
  }

  100%{
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -15deg);
    -webkit-transform-origin:90% 90%
  }

}


</style>
